<template>
    <div style="max-width: 600px;">
        <el-steps class="mb" :active="currentStep" finish-status="success" align-center>
            <el-step v-for="step in steps" :key="step" :title="step.title"></el-step>
        </el-steps>
        <div v-if="currentStep === 0">
            <slot name="step-1"></slot>
        </div>
        <div v-if="currentStep === 1">
            <slot name="step-2"></slot>
        </div>
        <div v-if="currentStep === 2">
            <slot name="step-3"></slot>
        </div>
        <div class="step-buttons mt">
            <el-button @click="prevStep" v-if="currentStep > 0">上一步</el-button>
            <el-button @click="nextStep" type="primary">
                {{ currentStep === steps.length - 1 ? "提交" : "下一步" }}
            </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
const currentStep = ref<number>(0)
const props = defineProps(['steps', 'form1', 'form2', 'form3'])
const emit = defineEmits(['handleSubmit'])
// 上一步
const prevStep = () => {
    if (currentStep.value > 0) {
        currentStep.value--
    }
}

const nextStep = () => {
    const forms = [props.form1, props.form2, props.form3]
    const currentForm = forms[currentStep.value]
    currentForm.validate((valid: boolean) => {
        if (valid) {
            if (currentStep.value < props.steps.length - 1) {
                currentStep.value++
            } else {
                emit('handleSubmit')
            }
        }
    })
}
</script>